<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Demo: Connecting DataGrid to a Store</title>
    <link rel="stylesheet" href="style.css" media="screen">
    <link rel="stylesheet" href="demo.css" media="screen">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojo/resources/dojo.css" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.9/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojox/grid/resources/Grid.css" />
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojox/grid/resources/claroGrid.css" />
</head>
<body class="claro">
<h1>Demo: Connecting DataGrid to a Store</h1>

<div id="target-node-id"></div>
<button id="save">Save</button>
<!-- load dojo and provide config via data attribute -->
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojo/dojo.js" data-dojo-config="async: true, isDebug: true, parseOnLoad: true"></script>
<script>
    require([
        "dojo/store/JsonRest",
        "dojo/store/Memory",
        "dojo/store/Cache",
        "dojox/grid/DataGrid",
        "dojo/data/ObjectStore",
        "dojo/query",
        "dojo/domReady!"
    ], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
        var myStore, dataStore, grid;
        myStore = new Cache(JsonRest({idProperty: 'id', target: '/states/'}), new Memory());
        grid = new DataGrid({
            store: dataStore = new ObjectStore({objectStore: myStore}),
            structure: [
                {name:"State Name", field:"name", width: "200px"},
                {name:"Abbreviation", field:"abbreviation", width: "200px", editable: true}
            ]
        }, "target-node-id"); // make sure you have a target HTML element with this id

        //grid.set("query", { name: "Oregon" });

        grid.startup();
        query("#save").on("click", function(){
            dataStore.save();
        });

        // Store an object identified by identity
        myStore.add({
            name: "XPTO"
        });
    });
</script>
</body>
</html>
